import React, { Component } from 'react';
import { ImagePicker } from 'antd-mobile';
import { Box } from './style'

import Storage from '@/utils/storage'



const data = [
//   {
//   url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
//   id: '2121',
// }, {
//   url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
//   id: '2122',
// }
];

class Head extends Component {
    state = {
        files: data,
        del:true
      }
      onChange = (files, type, index) => {
        console.log(files, type, index);
        this.setState({
          files,
        }
        
        
        );
        console.log( (this.state.files[0]));
        // console.log( JSON.stringify(this.state.files[0]));
        Storage.set('islmg',JSON.stringify(this.state.files[0]))
        console.log( JSON.parse(Storage.get('islmg')));
      }
      componentDidMount(){
        console.log("头像");
        if (Storage.get('islmg')) {
          this.state.files[0]=JSON.parse(Storage.get('islmg'));
          this.setState({
            files:this.state.files
          })
          console.log( this.state.files);
          
        }
       
      }


    render() {
      // this.state.files[0]=JSON.parse(Storage.get('islmg'));
        return (
            <Box>
             
             {/* { this.props.children} */}
              <ul>
                <li> 点击修改头像</li>
                <li> <h2> 用户名:&nbsp;<span>&nbsp; —— {Storage.get('islogin')} </span> </h2></li>
              </ul>
             
            <ImagePicker
              files={this.state.files}
              // files={Storage.get('islmg')}
              onChange={this.onChange}
              // selectable= {false}
              disableDelete= {this.state.del}
              // Storage.del('islmg')
              // onImageClick={(index, fs) => {console.log(index, fs);  }}
              onImageClick={() => { this.setState({ del : !this.state.del }) ;alert("点击图片右上角 X 进行图片删除"); } }
              selectable={ this.state.files.length < 1}
              accept="image/gif,image/jpeg,image/jpg,image/png"
            />

            
          </Box>
        );
    }
}

export default Head;
